<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>插件管理</title>
    <link href="../../css/element.css" rel="stylesheet">
    <link href="../../css/audio.css" rel="stylesheet">
    <link href="../../css/base.css" rel="stylesheet">
</head>
<body>
<div id="wrapper" v-cloak>
    <el-container>
        <el-aside :width="isCollapse ? '64px' : '200px'" style="background-color: black; transition:width .5s">
            <div style="background-color: black; height: 60px; line-height: 60px; text-align: center;
                color: white; font-size: 20px;">
                <transition name="el-fade-in-linear">
                    <span name="fade" v-show="!isCollapse"><a href="/page/end/index.html">X-Admin</a></span>
                </transition>
            </div>
            <el-menu :collapse="isCollapse" :default-openeds="['1']" active-text-color="#ffd04b" background-color="black"
                     class="el-menu-vertical-demo"
                     default-active="plugins"
                     style="border: none;" text-color="#fff">
                <a href="/page/end/index.html">
                    <el-menu-item index="home">
                        <i class="el-icon-data-line"></i>
                        <span slot="title">首页</span>
                    </el-menu-item>
                </a>
                <el-submenu index="1" v-if="user.permission && user.permission.length > 0">
                    <template slot="title">
                        <i class="el-icon-menu"></i>
                        <span slot="title">信息管理</span>
                    </template>
                    <a :href=`${item.path}` :key="item.id" v-for="item in user.permission">
                        <el-menu-item :index="item.flag">
                            <i class="el-icon-s-data"></i>
                            <span slot="title">{{item.name}}</span>
                        </el-menu-item>
                    </a>
                </el-submenu>
            </el-menu>
        </el-aside>
        <el-container>
            <el-header style="background-color: black; line-height: 60px; color: white;">
                <el-row>
                    <el-col :span="1">
                        <i :class="[isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold']"
                           @click="handleCollapse" style="font-size: 22px; cursor: pointer"></i>
                    </el-col>
                    <el-col :offset="21" :span="2" style="text-align: right">
                        <span style="color: white; margin-right: 10px">{{user.username}}</span>
                        <el-dropdown>
                            <img src="/files/avatar"
                                 style="width: 40px; height: 40px; margin-right: 10px; border-radius: 50%">
                            <el-dropdown-menu slot="dropdown">
                                <a href="/page/end/person.html"
                                   style="display:inline-block; padding: 5px 0; width: 100px; text-align: center; color: black">个人信息</a>
                                <a @click="logout" href="#"
                                   style="display:block; width: 100px;  text-align: center; color: black">退出</a>
                            </el-dropdown-menu>
                        </el-dropdown>
                    </el-col>
                </el-row>
            </el-header>
            <!-- 主体区域 -->
            <el-main>

                <div class="upload-box">
                    上传<input @change="upload" id="file" style="cursor: pointer" type="file">
                </div>
                <div style="margin: 10px 0">
                    <img :src=`/files/${uploadFile}` alt="" style="width: 100px">
                </div>

                <el-card style="margin-top: 20px">
                    <textarea cols="30" id="mytextarea" rows="20"></textarea>
                </el-card>

                <el-button @click="print">打印富文本</el-button>

                <div class="audio-box">
                    <div class="audio-container">
                        <div class="audio-cover"></div>
                        <div class="audio-view">
                            <h3 class="audio-title">未知歌曲</h3>
                            <div class="audio-body">
                                <div class="audio-backs">
                                    <div class="audio-this-time">00:00</div>
                                    <div class="audio-count-time">00:00</div>
                                    <div class="audio-setbacks">
                                        <i class="audio-this-setbacks">
                                            <span class="audio-backs-btn"></span>
                                        </i>
                                        <span class="audio-cache-setbacks">
							</span>
                                    </div>
                                </div>
                            </div>
                            <div class="audio-btn">
                                <div class="audio-select">
                                    <div class="audio-prev"></div>
                                    <div class="audio-play" onclick="rotate()"></div>
                                    <div class="audio-next"></div>
                                    <div class="audio-menu"></div>
                                    <div class="audio-volume"></div>
                                </div>
                                <div class="audio-set-volume">
                                    <div class="volume-box">
                                        <i><span></span></i>
                                    </div>
                                </div>
                                <div class="audio-list">
                                    <div class="audio-list-head">
                                        <p>☺随心听</p>
                                        <span class="menu-close">关闭</span>
                                    </div>
                                    <ul class="audio-inline">
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </el-main>
        </el-container>
    </el-container>
</div>

<script src="../../js/jquery.min.js"></script>
<script src="../../js/vue.min.js"></script>
<script src="../../js/element.js"></script>
<script src="../../js/tinymce/tinymce.min.js"></script>
<script src="../../js/audio.js"></script>
<script src="../../js/base.js"></script>

<script>
    var song = [
        {
            'cover': 'https://img-blog.csdnimg.cn/20210319145727286.png',
            'src': '/file/半岛铁盒.wav',
            'title': '周杰伦 - 半岛铁盒'
        }
    ];


    let urlBase = "/user/"
    new Vue({
        el: "#wrapper",
        data: {
            user: {},
            isCollapse: false,
            uploadFile: ''
        },
        created() {
            this.user = sessionStorage.getItem("user") ? JSON.parse(sessionStorage.getItem("user")) : {};

            tinymce.init({
                selector: '#mytextarea',
                language: 'zh_CN',
                plugins: ['quickbars', 'link', 'table', 'image'], //选择需加载的插件
            });

            this.$nextTick(() => {
                let audioFn = audioPlay({
                    song: song,
                    autoPlay: false  //是否立即播放第一首，autoPlay为true且song为空，会alert文本提示并退出
                });

                /* 向歌单中添加新曲目，第二个参数true为新增后立即播放该曲目，false则不播放 */
                audioFn.newSong({
                    'cover': 'https://img-blog.csdnimg.cn/20210319145727286.png',
                    'src': '/file/半岛铁盒.wav',
                    'title': '周杰伦 - 半岛铁盒'
                }, false);
            })
        },
        methods: {
            print() {
                console.log(tinymce.activeEditor.getContent())
            },
            upload() {
                // let files = $("#file")[0].files;
                // let formData = new FormData();
                // for (let i = 0; i < files.length; i++) {
                //     formData.append("files", files[i]);
                // }
                let formData = new FormData();
                formData.append("file", $("#file")[0].files[0])
                $.ajax({
                    url: '/files/upload',
                    processData: false,
                    contentType: false,
                    type: 'POST',
                    data: formData
                }).then(res => {
                    if (res.code === '0') {
                        this.$message({
                            type: "success",
                            message: "上传成功"
                        });
                        this.uploadFile = res.data
                        // 清除已上传的文件
                        let file = $("#file");
                        file.val("")
                    }
                })
            },
            handleCollapse() {
                this.isCollapse = !this.isCollapse;
            },
            logout() {
                $.get("/user/logout");
                sessionStorage.removeItem("user");
                location.href = "/page/end/login.html";
            }
        }
    })
</script>
</body>
</html>
